<template>
  <div style="width: 100%; height: 600px">

    <div ref="mapContainer" id="chart" style="width: 100%; height: 600px"></div>
    <button style="position: fixed;top: 40px;left: 50%" @click="hightArea">高亮</button>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  name: "Echarts3DMap",
  data() {
    return {
      myChart: null,
      mapOptions: {}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    simulateMouseSlide(startX, startY, endX, endY, duration) {
      const distanceX = endX - startX;
      const distanceY = endY - startY;
      const steps = 100; // 设置滑动过程中的步数
      const stepDuration = duration / steps; // 计算每一步的持续时间

      let currentX = startX;
      let currentY = startY;

      function moveMouse() {
        // 计算当前步的位置
        currentX += (distanceX / steps);
        currentY += (distanceY / steps);

        // 模拟鼠标移动事件
        moveMouseTo(currentX, currentY);

        // 如果还没有到达终点，继续移动
        if (currentX < endX || currentY < endY) {
          setTimeout(moveMouse, stepDuration);
        }
      }

      // 启动模拟鼠标滑动
      moveMouse();

      function moveMouseTo(x, y) {
        // 创建一个鼠标移动事件
        const event = new MouseEvent('mousemove', {
          clientX: x,
          clientY: y,
          bubbles: true,
          cancelable: true
        });

        // 将事件派发到页面上
        document.dispatchEvent(event);
      }
    },
    hightArea() {
      // this.simulateMouseSlide(0, 0, 953, 239, 1000)
      //
      // return;
      let positionx=958;
      let positiony=230
      const event = new MouseEvent('mousemove', {
        'view': window,
        clientX: positionx,
        clientY: positiony,
        bubbles: true,
        cancelable: true
      });
      const event1 = new MouseEvent('mouseenter', {
        'view': window,
        clientX: positionx,
        clientY: positiony,
        bubbles: true,
        cancelable: true
      });
      const event2 = new MouseEvent('click', {
        'view': window,
        clientX: positionx,
        clientY: positiony,
        bubbles: true,
        cancelable: true
      });

      document.dispatchEvent(event); // 触发鼠标移动事件
      document.dispatchEvent(event1); // 触发鼠标移动事件
      document.dispatchEvent(event2); // 触发鼠标移动事件
      document.getElementsByTagName("button")
      return

      var option = this.myChart.getOption();

      console.log("hightArea", option)
      console.log("hightArea", echarts.getMap("china"))
      console.log("hightArea", option.geo3D)
      // option.geo3D.regions=[{name:"呼和浩特市"}]
      // this.myChart.setOption(option)
      // return
      // console.log("hightArea", option.geo3D)
      console.log("hightArea", this.myChart)
      console.log("hightArea", this.myChart.getZr())
      // this.mapOptions.geoJSON.regions[0].name = "呼和浩特市"
      // this.myChart.setOption(this.mapOptions);
      //
      // {name: "呼和浩特市", value: 300},

      let getZr = this.myChart.getZr()

      // getZr.showTip({
      //   seriesIndex: 0, // 数据系列索引
      //   dataIndex: 0, // 数据项索引
      //   name: '呼和浩特市', // 数据名称
      //   value: '300', // 数据值
      // });
      // this.myChart.dispatchAction({
      //   type: 'highlight',
      //   // 用 index 或 id 或 name 来指定 geo 组件。
      //   // 可以用数组指定多个 geo 组件。
      //   geoIndex: 0,
      //   geoId: 'china',
      //   geoName: 'china',
      //   // geo 组件中 region 名称。
      //   name: '呼和浩特市',
      //   // 本次显示 tooltip 的位置。只在本次 action 中生效。
      //   // 缺省则使用 option 中定义的 tooltip 位置。
      //   // position: number[] | string | Function,
      // })

      // this.myChart.dispatchAction({
      //   type: 'select',
      //   seriesIndex: 0,
      //   dataIndex: 0,
      //   dataIndexInside: 0,
      //   name: "呼和浩特市"
      // });
      //
      // this.myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0,
      //   dataIndexInside: 0,
      //   name: "呼和浩特市"
      // });
      //
      //
      // this.myChart.dispatchAction({
      //   type: 'highlight',
      //   seriesIndex: 0,
      //   dataIndex: 0,
      //   dataIndexInside: 0,
      //   name: "呼和浩特市"
      // })
      // this.myChart.dispatchAction({
      //   type: 'select',
      //   seriesIndex: 0,
      //   dataIndex: 0,
      //   dataIndexInside: 0,
      //   name: "呼和浩特市"
      // })
      this.myChart.dispatchAction({
        type: 'toggleSelect',
        seriesIndex: 0,
        dataIndex: 0,
        dataIndexInside: 0,
        name: "呼和浩特市"
      })

      // this.myChart.dispatchAction({
      //   type: 'mousemove',
      //   seriesIndex: 0,
      //   dataIndex: 1
      // })
      this.myChart.dispatchAction({
        type: 'mapSelect',
        seriesIndex: 0,
        dataIndex: 0,
        dataIndexInside: 0,
        name: "呼和浩特市"
      })
    },
    setListener() {
      // 获取鼠标当前的位置
      function getMousePosition(event) {
        const x = event.clientX; // 鼠标的 X 坐标
        const y = event.clientY; // 鼠标的 Y 坐标
        console.log(`鼠标位置：(${x}, ${y})`);
        // alert(`鼠标位置：(positionx${x}, ${y})`)
      }

// 监听鼠标移动事件
      document.addEventListener('click', getMousePosition);

      // this.mapOptions = option

      // 监听点击事件
      this.myChart.on("click", (params) => {
        console.log("Clicked params:", params);
      });
      this.myChart.on("select", (params) => {
        console.log("select params:", params);
      });
      this.myChart.on("highlight", (params) => {
        console.log("highlight params:", params);
      });
      this.myChart.on("hover", (params) => {
        console.log("hover params:", params);
      });
      // this.myChart.on("showTip", (params) => {
      //   console.log("showTip params:", params);
      // });
      this.myChart.on('*', function (event) {
        console.log("==", event.eventType, event);
      });
      this.myChart.on("axisareaselected", (event) => {
        console.log("event", event)
      })
      this.myChart.on("selectchanged", (event) => {
        console.log("event", event)
      })
      this.myChart.on("geoselectchanged", (event) => {
        console.log("event", event)
      })
      this.myChart.on("datarangeselected", (event) => {
        console.log("event", event)
      })
    },
    initChart() {
      fetch("https://geo.datav.aliyun.com/areas_v3/bound/150000_full.json")
          .then((response) => response.json())
          .then((data) => {
            if (this.myChart) {
              this.myChart.dispose()
              this.myChart.clear()
              this.myChart.resize()
            }


            echarts.registerMap("china", {geoJSON: data});
            this.myChart = echarts.init(this.$refs.mapContainer);
            this.mapOptions.geoJSON = data

            const option = {
              title: {
                text: "China",
                left: "center",
                textStyle: {
                  color: "#000",
                  fontSize: 18,
                },
              },
              tooltip: {
                show: true,
                formatter: "{c}户", // 显示地区名称
              },
              visualMap: {
                max: 1000,
                inRange: {
                  color: [
                    "#4eb8da",
                    "#62b6cd",
                    "#76b4bc",
                    "#86b1ad",
                    "#98ae9a",
                    "#a8a985",
                    "#b6a371",
                    "#c19e5f",
                    "#ce9842",
                  ], // 根据数值设置区域颜色
                },
              },
              // geo3D: {
              //   map: "china",
              //   roam: true, //是否开启平游或缩放
              //   show: true,
              //   regionHeight: 2, //地图高度
              //   zlevel: -1, // 必须设置，
              //   viewControl: { // 调整合适的角度显示
              //     distance: 110, //地图视角 控制初始大小
              //     rotateSensitivity: [1, 1],
              //   },
              //   label: {
              //     show: true, //是否显示市
              //     color: '#fff', //文字颜色
              //     fontSize: 14, //文字大小
              //   },
              //   // itemStyle: {
              //   //   color: '#244a79',
              //   //   borderColor: '#fff',
              //   //   borderWidth: 1,
              //   //   opcity: 1,
              //   // },
              //   // emphasis: {
              //   //   itemStyle: { color: '#0373b4'},
              //   // },
              //   regions: []
              // },
              series: [
                {
                  type: "map3D",
                  map: "china",
                  zoom: 3,
                  shading: "lambert", // Lambert shading 适合地图
                  groundPlane: {
                    //   show: true,
                    //   color: "#000",
                  },
                  itemStyle: {
                    color: "#367EE2", // 设置区域默认颜色
                    borderColor: {
                      type: "linear", // 设置为线性渐变
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#fff", // 边框渐变起点颜色
                        },
                        {
                          offset: 1,
                          color: "#fff", // 边框渐变终点颜色
                        },
                      ],
                      global: false, // 不使用全局渐变
                    },
                    borderWidth: 2, // 边框宽度
                  },
                  emphasis: {
                    itemStyle: {
                      color: "#2e58af", // 鼠标悬浮时的颜色
                    },
                  },
                  light: {
                    main: {
                      intensity: 1.2, // 增加光照强度
                      shadow: true, // 开启阴影效果
                      shadowQuality: "high", // 阴影质量
                      alpha: 40, // 视角高度
                      beta: 40, // 水平角度
                    },
                    ambient: {
                      intensity: 0.3, // 环境光强度
                    },
                  },
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff", // 默认标签颜色
                      fontSize: 14,
                      backgroundColor: "rgba(0, 0, 0, 0)", // 默认无背景色
                    },
                  },
                  // 根据数值调整高度
                  viewControl: {
                    alpha: 45, // 控制视角的俯视角度
                    projection: "perspective", // 使用正交投影
                    distance: 100,
                    beta: 10,
                  },
                  data: [
                    {name: "呼和浩特市", value: 300},
                    {name: "包头市", value: 500},
                    {name: "阿拉善盟", value: 100},
                    {name: "巴彦淖尔市", value: 200},
                    {name: "乌海市", value: 900},
                    {name: "鄂尔多斯市", value: 400},
                    {name: "乌兰察布市", value: 700},
                    {name: "锡林郭勒盟", value: 800},
                    {name: "赤峰市", value: 0},
                    {name: "通辽市", value: 0},
                    {name: "兴安盟", value: 100},
                    {name: "呼伦贝尔市", value: 400},
                  ],
                },
              ],
            };
            this.myChart.setOption(option);
            this.setListener()

          });
    },
    handleMapClick(params) {
      // 处理点击事件，params 中包含点击的信息
      alert(`点击了 ${params.name}`);
    },
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #2c3e50;
}
</style>